<template>
	<view class="content">
		<view class="splite"></view>
		<input class="input fontSize14" type="text" placeholder="收货人"     :value="data.name" @input="getName">
		<input class="input fontSize14" type="number" placeholder="手机号码" :value="data.tel" maxlength="11" @input="getTel">
		<view class="input" @tap="tapThree" style="width: 90%;">
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
			<view class="name fontSize14" v-if="showThree==false">{{nameAddr}}</view>
			<view class="name fontSize14" v-if="showThree">{{province}}，{{city}}，{{area}}</view>
			<uni-icons class="icons" type="arrowright" color="#ABABAB" size="12"/>
			<view class="clearBoth"></view>
			</picker>
		</view>
		<textarea class="input" placeholder="详细地址" :value="data.addr" @input="getAddr"/>
		<view class="row">
			<view class="name">设为默认地址</view>
			<switch :checked="data.isCheck" @change="switchChange" color="rgb(220,88,42)" />
			<view class="clearBoth"></view>
		</view>
		
		<view class="addrBtn" @tap="sureBtn" v-show="editId==''">确定添加</view>
		<view class="footerBox flexBox" v-if="editId">
			<view class="btnDel textCenter" @tap="delBtn">删除该收货地址</view>
			<view class="btnSave textCenter" @tap="sureBtn">保存</view>
		</view>
		
		<!-- <view class="addrBtn" @tap="sureBtn">确定</view> -->
		
	</view>
</template>
<style>
	.content{width:100%;min-height: 100vh;background: rgb(244,244,244);}
	.content .splite{width:100%;height:20upx;background: rgb(244,244,244);}
	.content .input{width:85%;padding:4% 2.5%;border-radius: 10upx;background: white;margin:20upx 0;margin-left: 5%;}
	.content .uni-input-placeholder{font-size: 16px;color:#CCCCCC}
	.content .uni-textarea-placeholder{font-size: 16px;color:#CCCCCC}
	.content .row{width:90%;height:60upx;line-height: 60upx;margin-left: 5%;}
	.content .row .name{float: left;color: #000000;font-size: 16px;}
	.content .row switch{float: right;transform:scale(0.7);}
	.content .input .name{float: left;color:#CCCCCC}
	.content .input .icons{float: right;}
	.content .del{width:90%;padding:2.5%;color:red;text-align: center;border:1px solid red;border-radius:200upx;position: absolute;bottom:5%;left: 2.5%;}
	.content .sureBtn{width: 90%;margin-left: 5%;padding:20upx 0;background: #DC582A;color:white;font-size: 32upx;text-align: center;border-radius: 100upx;position: fixed;left:5%;bottom:20upx;z-index: 3;}
	.content .footerBox{width: 90%;justify-content: space-between;position: fixed;left:5%;bottom:20upx;z-index: 3}
	.content .footerBox .btnDel{width: 47%;padding:20upx;border-radius: 100upx;background: rgb(40,50,102);color:white;font-size: 32upx;}
	.content .footerBox .btnSave{width: 47%;padding:20upx;border-radius: 100upx;background: #DC582A;color:white;font-size: 32upx;}
	.content .addrBtn{width: 90%;margin-left: 0%;padding:20upx 0;background: #DC582A;color:white;font-size: 32upx;text-align: center;border-radius: 100upx;position: fixed;left:5%;bottom:20upx;z-index: 3;}
</style>
<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import citys from '@/common/city.js'
	import Share from '@/common/wx_share.js'
	export default {
		components:{
			uniIcons,
			uniSection
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				nameAddr:"所在区域",
				editId:"",
				isThis:false,
				data:{
					"name":"",
					"tel":"",
					"addr":"",
					"isCheck":null
				},
				multiArray: [
					[],
					[],
					[]
				],
				showThree:false,
				multiIndex: [0, 0, 0],
				province:"请选择",
				city:"请选择",
				area:"请选择",
				addrList:[],
				
				
			}
		},
		onLoad(e){
			var that = this;
			this.AjaxThree()
			if( e.id ){
				this.editId = e.id
				uni.setNavigationBarTitle({title: '编辑收货地址'});
			}else{
				uni.setNavigationBarTitle({title: '新增地址'});
			}
			// this.Three();
		},
		methods: {
			AjaxThree(){
				let param={
					token:this._$userToken("userInfo").token
				};
				this._$InitRequest.request("Address/getcitylist", param).then(res => {
					for (var i = 0; i < res.data.province_list.length; i++){
						this.multiArray[0].push(res.data.province_list[i].pro_name)
					}
					this.multiArray[1].push(res.data.province_list[0].citylist[0].city_name)
					for (var i = 0; i < res.data.province_list[0].citylist[0].arealist.length; i++) {
						this.multiArray[2].push(res.data.province_list[0].citylist[0].arealist[i].area_name)
					}
					this.addrList = res.data.province_list
					if( this.editId )this.AjaxLoad();
				},error=>{})
			},
			AjaxLoad(){
				let param={
					dz_id:this.editId,
					token:this._$userToken("userInfo").token
				};
				this._$InitRequest.request("Address/getinfo", param).then(res => {
					this.data.name = res.data.address.contacts
					this.data.tel = res.data.address.phone
					this.data.addr = res.data.address.address
					if( res.data.address.moren == 1 ){
						this.data.isCheck = true
					}else{
						this.data.isCheck = false
					}
					for (var i = 0; i < this.addrList.length; i++) {
						if( this.addrList[i].id == res.data.address.pro_id )this.province = this.addrList[i].pro_name
						for (var a = 0; a < this.addrList[i].citylist.length; a++) {
							if( this.addrList[i].citylist[a].id == res.data.address.city_id )this.city = this.addrList[i].citylist[a].city_name
							for (var b = 0; b < this.addrList[i].citylist[a].arealist.length; b++) {
								if( this.addrList[i].citylist[a].arealist[b].id == res.data.address.area_id ){
									this.area = this.addrList[i].citylist[a].arealist[b].area_name
								}
							}
						}
					}
					this.showThree = true
				},error=>{})
			},
			Three(){
				for (var i = 0; i < citys.addr.data.length; i++){
					this.multiArray[0].push(citys.addr.data[i].value)
				}
				this.multiArray[1].push(citys.addr.data[0].children[0].value)
				for (var i = 0; i < citys.addr.data[0].children[0].children.length; i++) {
					this.multiArray[2].push(citys.addr.data[0].children[0].children[i].value)
				}
				console.log( this.multiArray );
			},
			switchChange: function(e){
				this.isThis = e.detail.value
			},
			tapThree(){this.showThree = true},
			bindMultiPickerColumnChange: function(e) {
				this.multiIndex[e.detail.column] = e.detail.value
				this.multiArray[1] = []
				this.multiArray[2] = []
				for (var i = 0; i < this.addrList.length; i++){
					if( i == this.multiIndex[0] ){
						for(var a = 0;a < this.addrList[this.multiIndex[0]].citylist.length;a++){
							this.multiArray[1].push(this.addrList[this.multiIndex[0]].citylist[a].city_name)
							for(var b = 0; b < this.addrList[this.multiIndex[0]].citylist[this.multiIndex[1]].arealist.length; b ++ ){
								this.multiArray[2].push(this.addrList[this.multiIndex[0]].citylist[this.multiIndex[1]].arealist[b].area_name)
							}
						}
					}
				}
				this.province = this.multiArray[0][ this.multiIndex[0] ]
				this.city = this.multiArray[1][ this.multiIndex[1] ]
				this.area = this.multiArray[2][ this.multiIndex[2] ]
			},
			getName(e){this.data.name = e.target.value},
			getTel(e){this.data.tel = e.target.value},
			getAddr(e){this.data.addr = e.target.value},
			delBtn(){
				var that = this;
				uni.showModal({
					title: '提示',
					content: "是否要删除该地址？",
					success: (res) => {
						if (res.confirm) {
							let param={
								dz_id:this.editId,
								token:this._$userToken("userInfo").token
							};
							that._$InitRequest.request('Address/del', param).then(res => {
								uni.showToast({title:res.mess,icon:"none"})
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1500)
							},error=>{})
						}else if(res.cancel){}
					}
				});
			},
			sureBtn(){
				var is_default = ""
				var pro_id = "",city_id = "",area_id = ""
				for (var i = 0; i < this.addrList.length; i++) {
					if( this.addrList[i].pro_name == this.province )pro_id = this.addrList[i].id
					for (var a = 0; a < this.addrList[i].citylist.length; a++) {
						if( this.addrList[i].citylist[a].city_name == this.city )city_id = this.addrList[i].citylist[a].id
						for (var b = 0; b < this.addrList[i].citylist[a].arealist.length; b++) {
							if( this.addrList[i].citylist[a].arealist[b].area_name == this.area ){
								area_id = this.addrList[i].citylist[a].arealist[b].id
							}
						}
					}
				}
				if( this.editId ){
					if( this.isThis == false ){
						is_default = 0
					}else{
						is_default = 1
					}
					if( this.data.name == "" ){
						uni.showToast({icon:"none",title:"请输入收货人"})
						return;
					}else if( this.data.tel == "" ){
						uni.showToast({icon:"none",title:"请输入手机号码"})
						return;
					}else if( this.data.tel.length  !== 11 ){
						uni.showToast({icon:"none",title:"请输入正确的手机号"})
						return;
					}else if( this.data.addr == "" ){
						uni.showToast({icon:"none",title:"请输入详细地址"})
						return;
					}else if( this.showThree == false ){
						uni.showToast({icon:"none",title:"请选择地址"})
						return;
					}else{
						let param={
							token:this._$userToken("userInfo").token,
							pro_id:pro_id,
							city_id:city_id,
							area_id:area_id,
							contacts:this.data.name,
							phone:this.data.tel,
							address:this.data.addr,
							moren:is_default,
							dz_id:this.editId,
						};
						this._$InitRequest.request('Address/edit', param).then(res => {
							uni.showToast({icon:"none",title:res.mess})
							setTimeout(function(){
								uni.navigateBack({
									delta:1
								})
							},1500)
						},error=>{})
					}
				}else{
					if( this.isThis == false ){
						is_default = 0
					}else{
						is_default = 1
					}
					if( this.data.name == "" ){
						uni.showToast({icon:"none",title:"请输入收货人"})
						return;
					}else if( this.data.tel == "" ){
						uni.showToast({icon:"none",title:"请输入手机号码"})
						return;
					}else if( this.data.tel.length  !== 11 ){
						uni.showToast({icon:"none",title:"请输入正确的手机号"})
						return;
					}else if( this.data.addr == "" ){
						uni.showToast({icon:"none",title:"请输入详细地址"})
						return;
					}else if( this.showThree == false ){
						uni.showToast({icon:"none",title:"请选择地址"})
						return;
					}else{
						let param={
							token:this._$userToken("userInfo").token,
							pro_id:pro_id,
							city_id:city_id,
							area_id:area_id,
							contacts:this.data.name,
							phone:this.data.tel,
							address:this.data.addr,
							moren:is_default
						};
						this._$InitRequest.request('Address/add', param).then(res => {
							uni.showToast({icon:"none",title:res.mess})
							if( res.status == 200 ){
								setTimeout(function(){
									uni.navigateBack({
										delta:1
									})
								},1500)
							}
						},error=>{})
					}
				}
			},
			
			
			
		}
	}
</script>